<template>
  <div ref="Tourist">
      <div class="b5" ref="TouristChild">
        <div class="b5_d1">
            <div class="first"></div>
            <div class="second">
                <span>Data video</span>
            </div>
            <div class="third"></div>
            <div class="forth">
                <span>私人定制数据可视化方案，快来联系我们</span>
            </div>
            <div class="fifth">
                <img src="@/assets/phone.png">
            </div>
            <div class="sixth">
            <span>销售经理：xxx</span>
            <div class="sixth">
                <span>工作时间：09:00-18:00（全年无休）</span>
            </div>
        </div>
            
        </div>
        <div class="b5_d2">
            <img src="@/assets/night.jpg">
                <div class="first"></div>
                <div class="second">
                    <span>体验私人定制的旅游感觉</span>
                </div>
                <div class="third"></div>
                <div class="forth">
                    <span>可视化的一些介绍</span>
                </div>
                <div class="fifth">
                    <span>提交数据·开始定制</span>
                </div>
            </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'Tourist',
    methods:{
      getHeigth(){
          this.$refs.Tourist.style.height=window.getComputedStyle(this.$refs.TouristChild).height
      }
    },
    mounted() {
        this.getHeigth()
    },
}
</script>

<style scoped>
.b5{
    height:550px;position:relative;
}
.b5>.b5_d1{
    background-color: black;width: 50%;height: 80%;
}
.b5>.b5_d1>.first{
    width: 100%;height: 10%;
}
.b5>.b5_d1>.second {
    width: 100%;
    height: 25%;
    margin-left: 10%;
    text-align: left;
}
.b5>.b5_d1>.second span {
    font-size: 80px;
    font-family: 'Agency FB';
    color: white;
}
.b5>.b5_d1>.third{
background-color: dimgrey;height: 0.5rem;width: 3rem;margin-left: 33%;
}
.b5>.b5_d1>.forth {
    margin-top: 5%;
    height: 12%;
    margin-left: 10%;
    text-align: left;
}
.b5>.b5_d1>.forth span {
    font-size: 28px;
    line-height: 60px;
    font-family: 微软雅黑;
    font-weight: lighter;
    color: white;
}
.b5>.b5_d1>.fifth {
    text-align: left;
    margin-left: 10%;
    margin-top: 2%;
}

.b5>.b5_d1>.sixth {
    margin-top: 1%;
    margin-left: 10%;
    text-align: left;
}

.b5>.b5_d1>.sixth span{
    color: white;
    font-size: 16px;
}

.b5>.b5_d2{
    width: 55%;height: 80%;margin-left: 45%;margin-top: -18%;
}

.b5>.b5_d2 img{
    width: 100%;height: 100%;
}

.b5>.b5_d2>.first {
    width: 100%;
    height: 10%;
    margin-top: -23rem;
}
.b5>.b5_d2>.second {
    width: 50%;
    
    position:absolute;
    top: 40%;
    left: 35%;
}
.b5>.b5_d2>.second span {
    font-size: 40px;
    font-family: 'Agency FB';
    color: white;
}
.b5>.b5_d2>.third {
    position: relative;
    background-color: ghostwhite;
    height: 0.5rem;
    width: 3rem;
    margin-left: 15%;
}
.b5>.b5_d2>.forth {
    position: absolute;
    height: 12%;
    margin-top: 1%;
    margin-left: 3%;
}
.b5>.b5_d2>.forth span {
    font-size: 25px;
    line-height: 60px;
    font-family: 微软雅黑;
    font-weight: lighter;
    color: white;
}
.b5>.b5_d2>.fifth {
    position: absolute;
    margin-left: 3%;
    margin-top: 5%;
    border: 1px solid white;
    width: 25%;
    height: 15%;
    text-align: center;
}

.b5>.b5_d2>.fifth:hover {
    background-color: peru;
    cursor: pointer;
    border: 1px solid peru;
}
.b5>.b5_d2>.fifth span {
    color: white;
    line-height: 60px;
    font-family: 微软雅黑;
    font-size: 26px;
}
</style>